{{extend name="layout/base-html"}}

{{block name="body"}}

<style>
    .layui-table-view .layui-table {
        width: 100%;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <table id="table" class="x-cate" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="status">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{
           d.status== 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="icon">
    <i class="iconfont">{{d.icon}}</i>
</script>

<script type="text/html" id="action-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加菜单</button>
    </div>
</script>

<script type="text/html" id="action-button">
    <a href="javascript:;" lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:;" lay-event="del" title="删除"><i class="layui-icon">&#xe640;</i></a>
</script>

<script type="module">
    import {status, del, sort, create, edit} from "/static/admin/js/api/additional/admin-menu.js";
    import {rain} from "/static/admin/js/app.js";
    import children from "/static/admin/js/extends/table-children.js";

    layui.use(['table', 'laydate'], () => {
        let table = layui.table,
            form = layui.form,
            laydate = layui.laydate;

        // 时间筛选
        laydate.render({
            elem: "#start",
            type: "datetime"
        });

        laydate.render({
            elem: "#end",
            type: "datetime"
        });

        // 表格
        table.render({
            ...rain.config.table

            , toolbar: '#action-toolbar'
            , defaultToolbar: []

            , cols: [[ //表头
                {field: 'id', title: 'ID'}
                , {field: 'title', title: '标题'}
                , {field: 'icon', title: 'icon图标', templet: '#icon', align: 'center'}
                , {field: 'uri', title: 'uri地址'}
                , {field: 'sort', title: '排序', edit: 'text', align: 'center'}
                , {field: 'create_time', title: '创建时间'}
                , {field: 'update_time', title: '更新时间'}
                , {field: 'status', title: '状态', templet: '#status', width: 100}
                , {fixed: 'right', title: '操作', toolbar: '#action-button', width: 150}
            ]],
            id: 'table-reload',
            page: false,

            done: (res) => {
                children.el = 'title';
                children.pid = 'parent_id';

                children.init(res.data);
            }
        });

        //监听状态操作
        form.on('switch(status)', function (obj) {
            status(this.value, {
                status: obj.elem.checked ? 1 : 0
            }).then(res => {
                dialog(res.msg, () => {
                    // 失败则恢复选中状态
                    if (200 != res.code) {
                        obj.elem.checked = !obj.elem.checked;

                        form.render('checkbox');
                    }
                });
            });
        });

        // 初始化配置
        rain.tableAction.init = {form, table};

        // 筛选
        rain.tableAction.search('table-reload');

        //监听行工具事件
        table.on('tool(table)', function (obj) {
            var data = obj.data;

            if (obj.event === 'del') {
                rain.tableAction.tool.del(layer, del, {data, obj});
            } else if (obj.event === 'edit') {
                edit(data.id);
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    create();
                    break;
            }
        });

        // 监听单元格修改
        table.on('edit(table)', (obj) => {
            switch (obj.field) {
                // 排序
                case 'sort':
                    sort(obj.data.id, {sort: obj.data.sort}).then(res => {
                        dialog(res.msg);
                    });
                    break;
            }
        });
    });


</script>
{{/block}}
